<template>
  <div class="managerManager">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">经理管理</x-header>
    <div class="topHolder"></div>
    <grid class="iconList" :cols="1" :show-lr-borders="false" :show-vertical-dividers="false">
      <grid-item v-for="(item,index) in iconList" :key="index" class="item" :link="item.path" v-if="item.auth">
        <div class="itemWrap" :class="[item.class]">
          <i class="iconfont" :class="[item.icon]"></i>
          <div class="text" v-text="item.name"></div>
        </div>
      </grid-item>
    </grid>
  </div>
</template>

<script>
  import { Grid, GridItem } from 'vux'
  import {message} from "../../common/util";

  export default {
    name:'managerManager',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        iconList: {
          'callServices': {'auth':true, 'name': '当前场内状况','path': {path:'/nowAreaStatus'}, 'class': 'areaStatus', 'icon': 'icon-yudingxinxi'},
          'requestPresent': {'auth':true, 'name': '当前场内销售状况','path': {path:'/nowSaleStatus'}, 'class': 'saleStatus', 'icon': 'icon-jiushui'},
          'requestCard': {'auth':true, 'name': '翻台列表','path': {path:'/turnOverList'}, 'class': 'turnOver', 'icon': 'icon-daizhifudingdan'}
        }
      }
    },
    components:{
      Grid,
      GridItem
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthority
      }
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },
    },
    mounted(){
      this.$store.commit('updateLoadingStatus',{isLoading:false})
    }
  }
</script>

<style lang="scss" scoped>
  .managerManager{
    .iconList{
      padding-top: 0.5rem;
      .vux-grid-item-no-border:after{border: none;}
      .item{
        padding:0.5rem 2rem;
        .itemWrap{
          padding:0.5rem 1rem 1rem;background: #eee;text-align: center;border-radius: 1rem;position: relative;
          .iconfont{font-size:5rem;}
          .text{margin-top: 0.5rem;font-size: 1rem;}
          &.areaStatus{
            background-color: #FF9500;color: #fff;
            background-image: -webkit-linear-gradient(top,#FF5E3A, #FF9500);
            background-image: -moz-linear-gradient(top,#FF5E3A, #FF9500);
            background-image: -ms-linear-gradient(top,#FF5E3A, #FF9500);
            background-image: -o-linear-gradient(top,#FF5E3A, #FF9500);
            background-image: linear-gradient(top,#FF5E3A, #FF9500);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
          &.saleStatus{
            background-color: #9479DF;color: #fff;
            background-image: -webkit-linear-gradient(top,#6F1BFE, #9479DF);
            background-image: -moz-linear-gradient(top,#6F1BFE, #9479DF);
            background-image: -ms-linear-gradient(top,#6F1BFE, #9479DF);
            background-image: -o-linear-gradient(top,#6F1BFE, #9479DF);
            background-image: linear-gradient(top,#6F1BFE, #9479DF);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
          &.turnOver{
            background-color: #FF2719;color: #fff;
            background-image: -webkit-linear-gradient(top,#FF2719, #FF61AD);
            background-image: -moz-linear-gradient(top,#FF2719, #FF61AD);
            background-image: -ms-linear-gradient(top,#FF2719, #FF61AD);
            background-image: -o-linear-gradient(top,#FF2719, #FF61AD);
            background-image: linear-gradient(top,#FF2719, #FF61AD);
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
  }
</style>
